<template>
	<view class="tab_list">
		<ul>
			<li v-for="(item,index) in list" :class="{active: activeIndex == index}" @click="itemClick(index)">{{item}}</li>
		</ul>
	</view>
</template>
 
<script>
	export default {
		name: '',
		props: {
			list: {
				type: Array,
				default() {
					return []
				}
			}
		},
		data(){
			return {
				activeIndex: 0
			}
		},
		methods:{
			itemClick(index) {
				this.activeIndex = index
				this.$emit("itemClick", index)
			}
		}
	}
</script>
 
<style lang="less" scoped>
	.tab_list {
		padding: 10px;
	}
	ul {
		display: flex;
		justify-content: space-around;
		padding-left: 0;
		li {
			flex: 1;
			padding-bottom: 5px;
			text-align: center;
			padding-bottom: 10px;
		}
	}
	.active {
		border-bottom: 2px solid #eb4d4b;
	}
</style>
